<template>
    <div>
      <div ref="numberElement" class="number">{{ currentNumber }}</div>
    </div>
  </template>
  
  <script>
  import { gsap } from 'gsap';
  
  export default {
    data() {
      return {
        currentNumber: 0,
        targetNumber: 100,
        intervalId: null
      };
    },
    mounted() {
      this.startAnimation();
    },
    beforeDestroy() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
    },
    methods: {
      startAnimation() {
        this.intervalId = setInterval(() => {
          // 随机生成一个新的目标数字
          this.targetNumber = Math.floor(Math.random() * 1000);
          // 使用 GSAP 实现数字滚动动画
          gsap.to(this, {
            duration: 1,
            currentNumber: this.targetNumber,
            snap: { currentNumber: 1 },
            ease: 'power2.out'
          });
        }, 3000);
      }
    }
  };
  </script>
  
  <style scoped>
  .number {
    font-size: 29px;
    font-weight: 300;
    /* text-align: center; */
  }
  </style>    